← Back to Motion Loom   ← Back to 3D Design

Tip: Open the app and check the Documentation button on the start screen for the full list of tips and shortcuts.

MOTION LOOM 3D

Overview

Motion Loom 3D is a browser-based 3D design tool that combines a real-time 3D viewport with a node-based effect system and a layer stack. Create shapes, connect them to effects using visual nodes, and export your creations as images or standalone HTML files.

Getting Started

1. Enter a project name on the start screen and click New Project
2. Use the shape toolbar on the left to add 3D primitives (cube, sphere, cylinder, etc.)
3. Select shapes in the viewport to edit their Transform, Material, and Shape properties in the right panel
4. Open the Node Graph (bottom panel) to connect shapes to effects and modifiers
5. Use the Layers tab to manage visibility, locking, and organisation

Viewport Controls

Keyboard Shortcuts

Number Input Scrubbing

All number inputs support click-and-drag to adjust values. Drag left/right on any number field to scrub the value up or down.

• Normal drag -adjusts by the input's step value
• Shift + drag -adjusts in 10× increments (coarse)
• Ctrl + drag -adjusts in 1 unit increments (fine)

Shapes

Available shape primitives:

• Cube -width, height, depth
• Sphere -radius, segments
• Cylinder -top/bottom radius, height, segments
• Cone / Pyramid -radius, height, segments
• Torus -radius, tube, segments
• Plane -width, height
• Rounded Box -dimensions + corner radius
• Capsule -radius, length
• Star -points, outer/inner radius, depth

Origin / Pivot Point

Each shape has an Origin (pivot point) that controls where rotation and scaling happen. Adjust it in the Transform panel using the X/Y/Z fields or use the preset buttons:

• Center -origin at geometry center (default)
• Bottom -origin at the base of the shape
• Top -origin at the top of the shape

Naming & Renaming

Double-click any shape or effect name in the Node Graph or Layer Stack to rename it.

Node Graph

The bottom panel contains the Node Graph where you visually connect shapes to effects. Each shape appears as a blue node; effects appear in various colours.

• Connect nodes -drag from an output socket (right side) to an input socket (left side)
• Delete connections -right-click (or long-press) a connection line
• Pan -click-drag on empty space in the node graph
• Zoom -scroll wheel
• Add effects -click the + Add Effect button

Effects

Modifiers

Modifiers deform the actual geometry of shapes. When a modifier is connected, the shape automatically gains extra subdivisions for smooth deformation.

Boolean Operations (CSG)

Boolean nodes combine two or more shapes using Constructive Solid Geometry:

• Boolean Union -merges shapes together (A ∪ B)
• Boolean Subtract -removes the second shape from the first (A − B)
• Boolean Intersect -keeps only the overlapping region (A ∩ B)

Connect two or more shape nodes to a boolean node's inputs. The result replaces the first shape; subsequent shapes are hidden.

Layer Stack

Switch to the Layers tab in the right panel to see all shapes in a list view.

• Select -click a layer row
• Rename -double-click the layer name
• Hide/Show -click the eye icon
• Lock/Unlock -click the lock icon (prevents accidental editing)
• Delete -click the trash icon

Shapes connected to a Group effect node are automatically grouped in the layer stack.

Environment

In the Env tab of the right panel:

• Background -set the scene background colour
• Ground Plane -toggle the shadow-catching ground
• Ambient / Sun -control lighting intensity
• Angle / Height -orbit the directional light around the scene
• Light X/Y/Z -precisely position the light in 3D space
• Shadows -toggle shadow rendering

Camera

The Camera tab offers:

• Perspective / Ortho / Isometric modes
• Field of View slider
• Aspect Ratio presets (Free, 16:9, 4:3, 1:1, 9:16, 2.35:1)
• View Cube -click faces to snap the camera to standard views

Presets

Click Presets in the top bar (requires a shape to be selected):

• Shape Looks -quickly apply material styles (Toy, Sci-Fi, Chunky, Minimal)
• Node Chains -add pre-connected modifier chains (Twist+Taper, Array+Mirror, Noise+Smooth)
• Randomize -randomly change colour, material, scale, and rotation

Saving & Exporting

• Save (Ctrl+S) -downloads a .nblk project file
• Open Project -load a previously saved .nblk file
• Export PNG -screenshot of the viewport
• Transparent PNG -screenshot with transparent background
• Standalone HTML -exports a self-contained HTML file with your 3D scene

Tips

• Use the View Cube (top-right of viewport) to quickly switch between views
• Shapes automatically get extra subdivisions when modifiers are connected, so twist/bend/taper work smoothly even on low-poly primitives
• Boolean operations require shapes to be positioned so they overlap in the viewport
• The Group effect node lets you control multiple shapes as a unit -connect several shapes to one Group node to transform them together
• All changes support undo/redo (up to 50 steps)